<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
			#div1 {
				margin: 100px auto;
				width: 200px;
				height: 200px;
				border: 2px solid black;
				
			}
			#input1 {
				width: 100px;
				height: 40px;
				margin: 20px;
			}
			#input2 {
				width: 100px;
				height: 35px;
				margin: 20px;
			}
			#button1 {
				width: 50px;
				height: 20px;
				margin: 10px 0 0 40px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<input type="color" name="input1" id="input1" value="" /><br />
        <input type="text" name="" id="input2" value="请输入一个角度值" /><br />
		<input type="button" name="button1" id="button1" value="确认" />
		<div id="div1"></div>
		网页编辑
	</body>
	<script type="text/javascript">
	     
	     var bgcolor = document.getElementById("button1");
	     
	     bgcolor.onclick = function() {
	     	div1.style.background = input1.value;
	     	var turn = input2.value;
	     	div1.style.transform = "rotateZ("+turn+"deg)";

	     	
	     }
	    
	     

	</script>
</html>
